<template>
        <el-header>
            <div class="home_info">
                <div class="home_logo">
                    <img src="@/assets/logo.png" alt="logo">
                </div>
                <div class="home_name">
                    <p>电商后台管理系统</p>
                </div>
            </div>
            <el-tooltip content="登出" placement="left">
                <el-button
                    type="danger"
                    icon="el-icon-switch-button"
                    circle
                    size="small"
                    @click="loginOut"
                >
                </el-button>  
            </el-tooltip>              
        </el-header>
</template>

<script>
export default({
    name:'homeheader',
    methods: {
        loginOut(){
            this.$confirm('是否退出登录？', '登出提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                this.askresetinfo();
                window.sessionStorage.clear();
                this.$router.push('/login');
                this.$message({
                    center:true,
                    showClose: true,
                    type: 'success',
                    duration:2000,
                    message: '登出成功'
                });
            }).catch(() => {
                this.$message({
                    center:true,
                    showClose: true,
                    type: 'info',
                    duration:2000,
                    message: '登出取消'
                });
            });
        },
        askresetinfo(){
            this.$store.commit('resetInfo',true);
        }
    }
})
</script>

<style lang="less"scoped>
    .el-header{
        background-color: #2b4b6b;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content:  space-between;
        .home_info{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .home_logo{
                max-width: 40px;
                max-height: 40px;
                border: 5px solid #5288be;
                border-radius: 50%;
                box-shadow: 0 0 5px #2b2b2b;
                overflow: hidden;
                img{
                    width: 100%;
                    height: 100%;
                    background-color: #f9f9f7;
                }
            }
            .home_name{
                font-size: 25px;
                font-weight: bold;
                margin-left: 10px;
            }
        }
    }
</style>